<template>
  <common-page title="字段配置">
    <el-button slot="header" @click="back">返回</el-button>

    <common-list slot="content">
      <!-- 按钮组织start -->
      <el-row slot="tools" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <!--v-hasPermi="['system:index:add']" -->
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="edit(null)"
            >新增</el-button
          >
        </el-col>
      </el-row>
      <common-search slot="search" @search="handleQuery" @reset="resetQuery">
        <el-form
          :inline="true"
          ref="queryForm"
          :model="query"
          label-width="63px"
          @submit.native.prevent
        >
          <el-form-item label="字段名称" prop="columnName">
            <common-input v-model="query.columnName"></common-input>
          </el-form-item>
          <el-form-item label="字段别名" prop="columnAlias">
            <common-input v-model="query.columnAlias"></common-input>
          </el-form-item>
          <el-form-item label="统计字段" prop="isStatistics">
            <el-select v-model="query.isStatistics">
              <el-option label="全部" :value="null"> </el-option>
              <el-option label="启用" value="0"> </el-option>
              <el-option label="停用" value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指标字段" prop="isShow">
            <el-select v-model="query.isShow">
              <el-option label="全部" :value="null"> </el-option>
              <el-option label="启用" value="0"> </el-option>
              <el-option label="停用" value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="条件字段" prop="isSearch">
            <el-select v-model="query.isSearch">
              <el-option label="全部" :value="null"> </el-option>
              <el-option label="启用" value="0"> </el-option>
              <el-option label="停用" value="1"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </common-search>
      <!-- 按钮组织end -->
      <el-table
        slot="content"
        class="global-common-table"
        v-loading="loading"
        :data="list"
        height="100%"
        cell-class-name="global-common-table-cell"
        header-cell-class-name="global-common-table-header-cell"
        size="small"
      >
        <el-table-column
          label="字段名称"
          align="left"
          prop="columnName"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">{{ row.columnName }}</template>
        </el-table-column>

        <el-table-column
          label="字段别名"
          align="left"
          prop="columnAlias"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">{{ row.columnAlias }}</template>
        </el-table-column>

        <el-table-column
          label="字段类型"
          align="left"
          prop="columnTypeCN"
          width="200"
        >
          <template slot-scope="{ row }">{{ row.columnTypeCN }}</template>
        </el-table-column>

        <el-table-column
          label="时间格式"
          align="left"
          prop="dateFormat"
          width="200"
        >
          <template slot-scope="{ row }">{{ row.dateFormat }}</template>
        </el-table-column>

        <el-table-column
          label="统计字段"
          align="left"
          prop="isStatistics"
          width="120"
        >
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.isStatistics"
              :active-value="0"
              :inactive-value="1"
              @change="(val) => editConfig(val, row.id, 'isStatistics')"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column
          label="指标字段"
          align="left"
          prop="isShow"
          width="120"
        >
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.isShow"
              :active-value="0"
              :inactive-value="1"
              @change="(val) => editConfig(val, row.id, 'isShow')"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column
          label="条件字段"
          align="left"
          prop="isSearch"
          width="120"
        >
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.isSearch"
              :active-value="0"
              :inactive-value="1"
              @change="(val) => editConfig(val, row.id, 'isSearch')"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" width="52">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="edit(row)"
              v-hasPermi="['system:index:edit']"
              >编辑</el-button
            >
            <!--v-hasPermi="['system:index:delete']" -->
            <!--            <el-button type="text" @click="del(row.id)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <pagination
        slot="pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getList"
      />
    </common-list>

    <editConfigDialog
      ref="editConfigDialog"
      :indexPrefix="indexPrefix"
      @refresh="getList"
      @getTypeList="getTypeList"
    />
  </common-page>
</template>

<script>
import editConfigDialog from "./editConfigDialog.vue";
import {
  repertory_column_list,
  repertory_column_remove,
  repertory_column_edit,
} from "@/api/management/echart/repertory";

export default {
  name: "",
  components: { editConfigDialog },
  data() {
    return {
      total: 0, // 总条数
      loading: false, // table 加载中
      list: [], // 数据列
      selectionIds: "", // 列表选中数据id
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      isColumn: null,
      query: {
        pageNum: 1,
        pageSize: 10,
        columnName: null,
        columnAlias: null,
        isStatistics: null,
        isShow: null,
        isSearch: null,
      },
      indexId: "",
      typeList: [],
      isStatistics: 0,
    };
  },
  props: {
    indexPrefix: {
      type: String,
      default: "",
    },
  },
  // 方法
  methods: {
    getTypeList(data) {
      this.typeList = data;
    },
    handleQuery() {
      this.query.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.query = this.$options.data().query;
    },
    editConfig(val, id, key) {
      repertory_column_edit({
        id: id,
        [key]: val,
      }).then((res) => {
        if (res && res.code === 200) {
          this.$GlobalSuccessMessage("设置成功");
        } else {
          this.$GlobalErrorMessage("设置失败");
        }
      });
    },
    /**
     * 删除
     */
    del(ids) {
      this.$GlobalDeleteConfirm()
        .then(() => {
          repertory_column_remove({ ids: ids }).then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("删除成功");
              if (
                this.query.pageNum > 1 &&
                ids.split(",").length === this.list.length
              ) {
                this.query.pageNum -= 1;
              }
              this.getList();
            } else {
              this.$GlobalErrorConfirm("删除失败", res.msg).then();
            }
          });
        })
        .catch(() => {});
    },
    /**
     * 返回
     */
    back() {
      this.$emit("back");
    },
    /**
     * 获取列表
     */
    getList() {
      this.loading = true;
      let query = { ...this.query, indexId: this.indexId };
      repertory_column_list(query).then((res) => {
        res.rows.forEach((item) => {
          item.columnTypeCN =
            this.typeList.find((data) => data.code === item.columnType) &&
            this.typeList.find((data) => data.code === item.columnType).name;
        });
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    /**
     * 添加/编辑
     */
    edit(row) {
      let parent = {
        indexId: this.query.indexId,
      };
      this.$refs.editConfigDialog.show(
        row ? { ...row, ...parent } : { ...parent }
      );
    },
    show(row) {
      this.indexId = row.id;
      this.getList();
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.global-common-table {
  position: relative;
  /*border: 1px solid #eee;*/
  /*border-bottom: 0;*/
  /*height: calc(100% - 18px);*/
  margin-top: 0 !important;
}

::v-deep .global-common-table-header-cell {
  font-size: 14px;

  color: #909399;

  .cell {
    /*font-weight: bolder!important;*/
  }
}

::v-deep .global-common-table-cell {
  font-size: 14px;
}

.table-tooltip {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .icon-wushuju {
    font-size: 40px;
    line-height: 40px;
  }

  .tip-content {
    line-height: 32px;
  }
}

::v-deep .el-table__body {
  // 使表格兼容safari，不错位
  width: 100%;
  table-layout: fixed !important;
}
</style>
